﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/beetlex4axios.js"></script>
    <script src="js/component.js"></script>
    <script src="js/UploadFiles.js"></script>
    <title>Beetlex samples</title>
</head>
<body>
    <div id="page">
        <page-header>

        </page-header>
        <div class="container" style="margin-top:60px;">
            <div class="row">
                <form>
                    <div class="form-group">                     
                        <input ref="upload" @change="onUpload" type="file" multiple>
                    </div>                
                </form>
                <div @drop="onFileDrop" @dragover="event.preventDefault();" class="panel panel-default" style="min-height:400px;">
                    <div v-for="item in uploadFiles.items" class="upload-bar">
                        <div class="uploadstats-bar" :style="{width:item.percent+'%'}">
                        [{{item.percent}}%]{{item.name}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script>
        beetlex.useWebsocket();
        var model = {
            uploadFiles: new UploadFiles('/Upload'),
        };
        var page = new Vue({
            el: '#page',
            data: model,
            methods: {
                onUpload: function () {
                    var files = this.$refs.upload.files;
                    if (files.length == 0)
                        return;
                    this.uploadFiles.addmulti(files);
                    this.$refs.upload.value = null;
                },
                onFileDrop: function (event) {
                    event.preventDefault();
                    this.uploadFiles.addmulti(event.dataTransfer.files);
                }
            }
        });
        beetlex.websocket.connected = function () {
            //续传
            page.uploadFiles.upload();
        };
    </script>
</body>

</html>